<template>
  <view class="order-container" :style="'margin-top:'+(statusBarHeight+96)+'px'">
    <z-paging ref="paging" v-model="orderList" @query="queryList">
      <template #top>
        <view class="roof-top">
          <view class="search-msg-box">
            <view class="search-msg flex-center-between" :style="'padding-top:'+statusBarHeight+'px'">
              <search :width="'441rpx'" :height="'68rpx'" :margin="'10rpx 20rpx 10rpx 24rpx'" :backgroundColor="'#F7F7F7'"></search>
              <view class="messages flex-aj-center" @tap="goTo(4)">
                <image src="http://www.xvopen.com/xiaoV/img1/msg.png" mode=""></image>
                <view v-if="msgTip>0" class="tips">{{msgTip}}</view>
              </view>
            </view>
          </view>
          <view class="title-btn-receptacle flex">
            <view v-for="(item,index) in titleList" :key="index" class="item" :class="titleIndex==index?'active':''" @tap="titleClick(index)">
              {{item}}
              <view v-if="titleIndex==index" class="black-line-vessel flex-j-center animated fadeIn faster">
                <view class="black-line"></view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <view style="height: 300rpx;">
      </view>
      <view class="order-wrap">
        <order-item></order-item>
      </view>
      <view class="flex-a-center">
        <main-button v-if="item.orderStatus==1||item.orderStatus==2||(titleIndex==2&&item.lastCancelTime!=0)" :isGradient="false" :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" @click="cancelOrder(item.orderNo)">取消订单</main-button>
        <!-- <main-button v-if="titleIndex==0" :isGradient="false" :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" @click="goTo(3,titleIndex)">申请售后</main-button> -->
        <main-button v-if="item.orderStatus!=1" :isGradient="false" :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" @click.stop="goTo(2,titleIndex,item)">订单详情</main-button>
        <main-button v-if="item.orderStatus==1" :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" @click.stop="goTo(2,titleIndex,item)">待支付</main-button>
        <!-- <main-button v-if="titleIndex==2" :isGradient="false" :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" @click="goTo(0)">查看进度</main-button> -->
        <!-- <main-button v-if="titleIndex==2" :isGradient="false" :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'">联系店铺</main-button> -->
        <!-- <main-button v-if="titleIndex==2" :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'">订单签收</main-button> -->
        <!-- <main-button v-if="titleIndex==2" :isGradient="false" :width="'168rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'">拒绝退差价</main-button>
        <main-button v-if="titleIndex==2" :width="'168rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'">确认退差价</main-button>
        <main-button v-if="titleIndex==3" :isGradient="false" :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'">待分享</main-button>
        <main-button v-if="titleIndex==3" :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'">待评价</main-button>
        <main-button v-if="titleIndex==3" :width="'140rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" @click="goTo(1)">打开衣柜</main-button>
        <main-button v-if="titleIndex==4" :isGradient="false" :width="'196rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'">同意退货退款</main-button>
        <main-button v-if="titleIndex==4" :isGradient="false" :width="'196rpx'" :height="'60rpx'" :fontSize="'28rpx'" :margin="'0 0 0 16rpx'" @click="isRefundsDeny=true">拒绝退货退款</main-button> -->
      </view>


      <view style="height: 300rpx;">
      </view>
    </z-paging>


    <!-- 拒绝退货退款 蒙版层 -->
    <hint-txt-pic v-model:modelValue="isRefundsDeny" @confirm="refundsDenyConfirm" :subTitle="'确认要拒绝退货退款吗？'" :content="'若确认拒绝，请先填写拒绝原因'" :isBlue="false" :placeholder="'请输入拒绝原因'"></hint-txt-pic>
    <!-- 是否取消订单提示 蒙版层 -->
    <hint v-model:modelValue="isCancelConf" :isPic="true" :content="'您确定要取消订单吗？'" :isNoCancel="true" :contFontsize="'32rpx'" @confirm="hintCancelConfirm"></hint>
  </view>
</template>

<script setup>
import { systemStore } from '@/stores/system'

import {ref,onMounted} from "vue";
import {qryIndexList} from '@/api/home'
// import { orderList,getOrderStatus,orderCancel } from '@/api/order-item';

let app = getApp();
const SystemStore =systemStore()
const statusBarHeight = ref("")
statusBarHeight.value =  SystemStore.statusBarInfo.statusBarHeight;
const paging = ref(null)
//-----------------------------------data--------------
let props = defineProps({
  orderLists: {
    type: Array,
    default:function(){
      return []
    }
  },
  loading: {
    type: Boolean
  },
  loaded: {
    type: Boolean
  }
})
let titleList = ref(["全部订单","待支付","待完成","已完成","售后"])
let titleIndex = ref(0)
// 消息条数
let msgTip = ref(5)
let isQuery = ref(false)
let isRefundsDeny = ref(false)

let isCancelConf = ref(false)//是否展示取消订单提示
let thisOrderNo = ref(null)//当前订单号
let orderList =ref([])
//-----------------------------------onMounted---------
onMounted(() => {
  // getOrderStatus().then(res=>{
  //   console.log(res.data,'orderStatus--订单的所有状态')
  // })
});
const queryList = (pageNo, pageSize) => {
  // 此处请求仅为演示，请替换为自己项目中的请求
    setTimeout(()=>{
      paging.value.complete([])
    },100)
}
//-----------------------------------function-----------
const emits = defineEmits(['titleClick'])

function goTo(index,titleIndex,item){
  if(index==0){
    uni.navigateTo({
      url:'/pagesOrder/progress_details'
    })
  }else if(index==1){
    uni.navigateTo({
      url:'/pagesOrder/order_details?orderNo='+item.orderNo
    })
  }else if(index==2){
    if(titleIndex==4){
      uni.navigateTo({
        url:'/pagesOrder/order_details_after_sales'
      })
    }else{
      // uni.navigateTo({
      // 	url:'/pagesOrder/order_confirm?orderNo='+item.orderNo
      // })
      uni.navigateTo({
        url:'/pagesOrder/order_details?orderNo='+item.orderNo
      })
    }
  }else if(index==3){
    uni.navigateTo({
      url:'/pagesOrder/after_sales'
    })
  }else if(index==4){
    uni.navigateTo({
      url:'/pagesInfo/info'
    })
  }
}
function refundsDenyConfirm(){
  isRefundsDeny.value = false
}
//标题点击
function titleClick(index){
  titleIndex.value = index
  emits('titleClick',index)
}

// 取消订单
function cancelOrder(orderNo){
  // console.log(orderNo,'orderNo')
  isCancelConf.value = true
  thisOrderNo.value = orderNo
}
// 确认取消
function hintCancelConfirm(){
  isCancelConf.value = false
  orderCancel({orderNo:thisOrderNo.value}).then(res=>{
    console.log(res,'res--orderCancel')
    if(res.code==200){
      uni.showToast({title:'取消成功',icon:'none'})
      titleIndex.value = 1
      pageNum.value = 1
      getOrderList()
    }else{
      uni.showToast({title:res.msg,icon:'none'})
    }
  }).catch(res=>{
    uni.showToast({title:res.msg,icon:'none'})
  })
}


</script>

<style lang="scss">
.order-container{
  color: #000;
}
.roof-top{
  position: fixed;
  top: 0;
  left: 0;
  width: 750rpx;
  background-color: #fff;
  z-index: 2;
}
.search-msg-box{
  background-color: #fff;
  .search-msg{
    width: 65%
  }
}
.order-wrap{
  box-sizing: border-box;
  width: 100%;
  padding: 0 32rpx;
}
.messages{
  margin-right: 30rpx;
}
.state-content-box{
  background-color: #fff;
  margin: 24rpx;
  border-radius: 16rpx;
}
.state-box{
  padding: 18rpx 32rpx 20rpx;
  border-bottom: 1rpx solid #E5E5E5;
  .order{
    position: relative;
    .title{
      min-width: 136rpx;
      height: 52rpx;
      line-height: 52rpx;
      text-align: center;
      background-color: #E5F2FF;
      margin-right: 12rpx;
      padding: 0 12rpx;
      text{
        color: #222;
      }
    }
    .query-cont{
      width: 663rpx;
      min-height: 117rpx;
      position: absolute;
      top: 60rpx;
      left: 0;
      background-color: rgba(255,255,255,0.8);
      box-shadow: 0 3rpx 20rpx 1rpx rgba(0, 0, 0, 0.16);
      padding: 24rpx;
      font-size: 24rpx;
    }
  }
  .order text,.state{
    line-height: 52rpx;
    color: $uni-text-color-inverse;
  }
}
.content-box{
  padding-bottom: 32rpx;
  .order-cont{
    .order-refer{
      padding: 16rpx 32rpx 0;
    }
    .number{
      color: #999;
    }
    .order-price{
      padding: 32rpx 32rpx 24rpx;
      border-top: 1rpx solid $uni-border-color;
      color: #000;
      .grey{
        color: #999;
      }
      .prepay{
        text{
          font-weight: bold;
        }
      }
      .orderprice{
        margin-left: 10rpx;
        text{
          font-weight: bold;
        }
      }
    }
    .btn-vessel{
      margin: 0 32rpx;
      .remain{
        text{
          font-weight: bold;
        }
      }
    }
  }
}
</style>
